<template>
  <!-- 外围最大的盒子 -->
  <div class="executes">
    <div class="box">
      <!--图片地图区域 -->
      <div class="woimg" v-if="inif.myimage != ''">
        <img
          id="myone"
          :src="'data:image/png;base64,' + inif.myimage"
          :style="{
            width: inif.width * 0.6 * num + 'px',
            height: inif.height * 0.6 * num + 'px',
            marginLeft: loctionleft + 'px',
          marginTop: loctiontop + 'px',
          }"
        />
        <div class="zhouimg">
      <img src="../../assets/zhou3.png" alt="">
    </div>
    <!-- 

                    width: (item.weizhi.width + 25)  * 0.6 * num + 'px',
              height: (item.weizhi.height - 12)  * 0.6 * num + 'px',
              top: item.weizhi.y * 0.6 * num -(28* 0.6 * num /2) + 'px',
              left: (item.weizhi.x) * 0.6 * num -(30* 0.6 * num /2) + 'px',
                transform: 'rotate(' + item.weizhi.age + 'deg)',
                transformOrigin: 9 * num  + 'px '+9 * num  + 'px',
                lineHeight: (item.weizhi.height - 13) * 0.6 * num + 'px',
                fontSize: 20 * 0.6 * num   + 'px',
     -->
          <template>  
            <span
              v-for="item in complete"
              :key="item.id * 0.01"
              id="myspan"
              style="pointer-events: none;text-align: center;"
              :style="{
                width: (item.weizhi.width + item.weizhi.height-2) * num* 0.6 + 'px',
                height: (item.weizhi.height) * num* 0.6 + 'px',
                top: item.weizhi.y * num* 0.6 -((item.weizhi.height+3)* 0.6 * num/2) + loctiontop + 'px',
                left: (item.weizhi.x) * num* 0.6 -((item.weizhi.height+3)* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.weizhi.age + 'deg)',
                transformOrigin:  (item.weizhi.height+3)/2 * num* 0.6 + 'px '+ (item.weizhi.height+3)/2 * num* 0.6  + 'px',
                lineHeight: (item.weizhi.height) * 0.6 * num + 'px',
                fontSize: 20 * 0.6 * num + 'px',


              }"
            ><span class="myspanID"
            :style="{
                transform: 'rotate(' + -item.weizhi.age + 'deg)',
                lineHeight: (item.weizhi.height) * 0.6 * num   + 'px',
                fontSize: 20 * 0.6 * num   + 'px',
              }"
            >{{item.id}}</span></span>
          </template>
          <!-- -----------------------当没有点击任何一项时显示全部点位数据 ((list.y - 168) * num) / 10  
                          top: (inif.height - (item.y / 10.0 - inif.newy * 100.0) / 5 - 1) *  0.6 * num + 'px',
              left: ((item.x / 10.0 - inif.newx * 100) / 5) * 0.6 * num + 'px',------------------------- -->

              <template v-for="(item, index) in robot">
            <!--充电点图片 -->
            <img
              v-if="item.type == 3 && item.valuable_bits == 1"
              @click="select(item)" 
              :key="index * 0.15"
              id="bycar"
              src="../../assets/maiwei.zip.png"
              alt=""
              :style="{
                width: 20 * num * 0.6 + 'px',
                height: 20 * num * 0.6 + 'px',
                top: (inif.height-(item.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((item.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.angle  * 180 / Math.PI+ 'deg)',
              }"
            />
            <img
              v-if="item.type == 3 && item.valuable_bits == 0"
              @click="select(item)" 
              :key="index * 0.15"
              id="bycar"
              src="../../assets/飞书20220913-115140.png"
              alt=""
              :style="{
                width: 20 * num * 0.6 + 'px',
                height: 20 * num * 0.6 + 'px',
                top: (inif.height-(item.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((item.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.angle  * 180 / Math.PI+ 'deg)',
              }"
            />
            <!-- 显示全部库位点区域     -->
            <span
              v-if="item.type != 3"
              @click="select(item)" 
              :key="item.id"
              id="span"
              :class="activeItem === list ? 'active' : '' "
              :style="{
                backgroundColor: item.type == 0 ? '#9e9e9e':item.type == 1 ? '#feed9d':item.type == 2 ? '#ff9800':'',
                lineHeight: 20 * 0.6 * num  + 'px',
                fontSize: 16 * 0.6 * num   + 'px',
                width: 20*0.6 * num   + 'px',
                height: 20*0.6 * num   + 'px',
                top: (inif.height-(item.y / 10.0) / 5) * 0.6 * num -(20* 0.6 * num/2)+ loctiontop + 'px',
                left: (((item.x / 10.0) / 5)) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.angle  * 180 / Math.PI+ 'deg)',
              }"
              >{{ item.id }}</span
            >
            <!-- 车辆的实时位置 -->
          
          </template>
          <img
            id="bycar"
            src="../../assets/车辆.png"
            alt=""
            :style="{
              width: 15 * 0.6 * num + 'px',
              height: 30 * 0.6 * num + 'px',
              top: (inif.height - (inif.y / 10.0) / 5 ) * 0.6 * num   -(30* 0.6 * num /2) + loctiontop + 'px',
              left: ((inif.x / 10.0) / 5) * 0.6 * num -(15* 0.6 * num /2) + loctionleft + 'px',
              transform: 'rotate(' + -(inif.fused_angle * 180 / Math.PI +90) + 'deg)',
            }"
          />
          <!-- <span
            @click="select(item.id)"
            v-for="item in robot"
            :key="item.id"
            id="span"
            :style="{

              top: (inif.height-(item.y / 10.0) / 5) * 0.6 * num + 'px',
              left: (((item.x / 10.0) / 5)) * 0.6 * num + 'px',
            }"
            >{{ item.id }}</span
          > -->
          <!-- </template> -->

          <!-- 显示路线编辑点位 -->
          <!-- <span
            v-for="item in complete"
            
            id="mianspan"
            :style="{
              width: 35 * 0.6 * num + 'px',
              height: 35 * 0.6 * num+ 'px',
              lineHeight: 40 * 0.6 * num + 'px',
              fontSize: 40 * 0.6 * num + 'px',
             
                top:
                (
                  inif.height-(item.start_point.y / 10.0) / 5 ) *
                  0.6 * num+
                'px',
              left:
                ((item.start_point.x / 10.0) / 5) * 0.6 * num +
                'px',
            }"
            >1</span
          > -->

          <!-- 终点圆点 -->
          <!-- <span
            v-for="item in complete"
            :key="item.weizhi.age"
            id="mianspan"
            :style="{
              width: 35 * 0.6 * num + 'px',
              height: 35 * 0.6 * num + 'px',
              lineHeight: 40 * 0.6 * num+ 'px',
              fontSize: 40 * 0.6 * num + 'px',
              top:
                (
                  inif.height-(item.target_point.y / 10.0) / 5) *
                  0.6 * num +
                'px',
              left:
                ((item.target_point.x / 10.0) / 5) * 0.6 * num +
                'px',
            }"
            >2</span
          > -->
          <!-- 小圆点之间的边框 -->
          <!-- <span
            v-for="item in complete"
            :key="item.id * 0.01"
            id="myspan"
            style="transform-origin: 7px 7px"
            :style="{
              width: (item.weizhi.width + 30) * 0.6 * num + 'px',
              height: (item.weizhi.height - 7) * 0.6 * num + 'px',
              top: item.weizhi.y  * 0.6 * num + 'px',
              left: (item.weizhi.x ) * 0.6 * num  + 'px',
              transform: 'rotate(' + item.weizhi.age + 'deg)',
            }"
          ></span> -->
          <!-- 显示路线编辑点位 -->
          <!--平移按钮 -->
        <van-button @click="right" class="right"
          ><van-icon name="arrow" size="44"
        /></van-button>
        <van-button @click="left" class="left"
          ><van-icon name="arrow-left" size="44"
        /></van-button>
        <van-button @click="top" class="top"
          ><van-icon name="arrow-up" size="44"
        /></van-button>
        <van-button @click="bottom" class="bottom"
          ><van-icon name="arrow-down" size="44"
        /></van-button>

        <!-- --------------------------------------------------------------按钮放大缩小区域 -->
        <div class="mybig">
          <van-button type="info" @click="big"
            ><i class="iconfont icon-sousuofangda" style="fontsize: 28px"></i
          ></van-button>
          <van-button type="info" @click="min"
            ><i class="iconfont icon-suoxiao" style="fontsize: 28px"></i
          ></van-button>
        </div>
      </div>
      <!--右侧执行任务区域      -->
      <div class="mycontent" v-if="inif.myimage!=''">
        <van-button
          v-for="(item, index) in list"
          :key="index"
          @click="addtask(item, index+1)"
          :class="[{ active: activeItem === item }]"
          >{{ item }}</van-button
        >
        <div class="myinfo">
          <div class="pulldown">
            <Arrange
              v-if="listShow"
              :listShow="listShow"
              :newIndex="newIndex"
              :newItem="newItem"
              :locationd="location"
              :lineListd="lineList"
            ></Arrange>
            <!-- 点到点组件 -->
            <Son
              v-if="spotshow"
              :newIndex="newIndex"
              :newItem="newItem"
              :clickitem="clickitem"
              :spotshow="spotshow"
              :locationd="location"
            ></Son>

            <!-- 列到列组件 -->
            <Thirdly
              v-if="Thirdly"
              :Thirdly="Thirdly"
              :newIndex="newIndex"
              :newItem="newItem"
              :lineListd="lineList"
            ></Thirdly>

            <!-- 列到点组件 -->
            <Fourth
              v-if="Fourth"
              :Fourth="Fourth"
              :newIndex="newIndex"
              :newItem="newItem"
              :locationd="location"
              :lineListd="lineList"
            ></Fourth>

            <!-- 充电组件 -->
            <Recharge
              v-if="recharge"
              :recharge="recharge"
              :clickitem="clickitem"
              :newIndex="newIndex"
              :newItem="newItem"
              :locationd="location"
            ></Recharge>

            <!-- 回待命点组件 -->
            <Standby
              v-if="Standby"
              :Standby="Standby"
              :newIndex="newIndex"
              :newItem="newItem"
              :locationd="location"
            ></Standby>
            <div class="tasks" style="display: none;">
              <table>
                <thead>
                  <tr>
                    <th>任务号</th>
                    <th>状态</th>
                    <th>进度</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in taskList.task_list">
                    <td>{{item}}</td>
                    <td v-if="item == taskList.task_id">
                      <span v-if="taskList.task_state==0">空闲</span>
                      <span v-if="taskList.task_state==1">执行中</span>
                      <span v-if="taskList.task_state==2">完成</span>
                      <span v-if="taskList.task_state==3">错误</span> 
                    </td>
                    <td v-else>排队</td>
                    <td v-if="item == taskList.task_id">
                      {{Math.round(taskList.task_percent * 100) }} %
                    </td>
                    <td v-else style="text-align: center;">-</td>

                  </tr>
                </tbody>
              </table>
              <!-- <p><span>任务ID：{{taskList.task_id}}</span></p>
              <p><span>状态：<span v-if="taskList.task_state==0">空闲</span>
                      <span v-if="taskList.task_state==1">执行中</span>
                      <span v-if="taskList.task_state==2">完成</span>
                      <span v-if="taskList.task_state==3">错误</span>
                    </span>
                  </p> -->
            </div>
          </div>

          <!-- 任务状态区域 -->
          <!-- <div class="condition">
            <div class="head">当前任务状态列表</div>
            <table
              cellspacing="0"
              style="width: 100%"
              class="table"
              border="2px"
            >
              <tr
                v-for="(item, index) in 4"
                :key="index"
                class="list-tr"
              >
                <td v-for="(context, i) in 4" :key="i" style="width:50px; height:60px">
                 1
                </td>
              </tr>
            </table>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
      import Cookies from 'js-cookie'
// 导入yaml格式进行获取到数据的转换
import yaml from "js-yaml";
//导入获取库位点列表接口
import { gainApi } from "@/api/record";
//导入列列表数据
import { parseApi } from "@/api/location";
//导入封装好的路线编辑数据接口
import { geteditorsApi } from "@/api/editors";
export default {
  data() {
    return {
      num:0.5,
      loctiontop: 0, //右边偏移变量
      loctionleft: 0, //左边便宜变量
      taskList:{
        task_list:[],
        task_state:1,
        task_id:101,
        task_percent:0.6999999999,
      },
      activeItem: "", //选中颜色高亮的类名
      show: false, //充电点和待命点的显示和隐藏
      list: [
        "回待命点",
        "充电",
        "点到点任务",
        "点到列任务",
        "列到点任务",
        "列到列任务",
      ],
      spotshow: false, //控制点到点面板的显示和隐藏
      listShow: false, //控制点到列面板显示和隐藏
      Thirdly: false, //控制列到列面板显示和隐藏
      Fourth: false, //控制列到点任务页面的显示和隐藏
      recharge: false, //控制充电点任务页面的显示和隐藏
      Standby: false, //控制回待命点页面的显示和隐藏
      clickitem: "", //保存点击的下标
      newIndex: "", //保存点击的下标
      newItem: "", //保存点击的内容
      robot: [], //保存库位点的数组变量
      complete: [], //保存路线编辑的数组变量
      inif: {
        myimage: "", //保存图片
        width: "", //图片宽度
        height: "", //图片的高度
        newx: "", //圆点x轴坐标
        newy: "", //圆点y轴坐标
        x: "", //车辆x轴坐标
        y: "", //车辆y轴坐标
        fused_angle: "", //车辆角度
      },
      location:null,
      lineList:null,
	//th
	option: {
        column: [
          {
            label: '房台类型',
            prop: 'roomType'
          },
          {
            label: '已结',
            prop: 'closedAccount'
          },
          {
            label: '未收款',
            prop: 'noAccount'
          },
          {
            label: '赠送',
            prop: 'givePrice'
          },
          {
            label: '合计',
            prop: 'totalPrice'
          }
        ]
      },
    };
  },
  // 注册组件
  components: {
    //   //点到点组件
    Son: () => import("./components/dot.vue"),
    // 点到列组件
    Arrange: () => import("./components/arrange.vue"),
    //   //列到列组件
    Thirdly: () => import("./components/thirdly.vue"),
    //   //列到点组件
    Fourth: () => import("./components/fourth.vue"),
    //   // 充电组件
    Recharge: () => import("./components/recharge.vue"),
    //   //回待命点任务
    Standby: () => import("./components/standby.vue"),
  },
  created() {
    this.gain(); //获取地图方法
    this.getrecord(); //获取库位点方法
    this.getline(); //获取库位点方法
    this.geteditors(); //获取路线数据方法
  },
  watch: {
    location (newVal,oldVAL) {
        console.log(newVal,oldVAL)
    },
    lineList (newVal,oldVAL) {
        console.log(newVal,oldVAL)
    },
  },
  mounted() {
    let numss = Cookies.get('nums');
    let loctiontopss = Cookies.get('loctiontops');
    let loctionleftss = Cookies.get('loctionlefts');
    if(numss == undefined){
    }else{
      this.num = Number(numss);
    }
    if(loctiontopss == undefined){
    }else{
      this.loctiontop = Number(loctiontopss);
    }
    if(loctionleftss == undefined){
    }else{
      this.loctionleft = Number(loctionleftss);
    }
  },
  //注册点击事件
  methods: {
    select(item) {
      console.log(item)
      this.clickitem = item;
    },
    //图片右边便宜
    right() {
      this.loctionleft += 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    left() {
      this.loctionleft -= 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    top() {
      this.loctiontop -= 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    bottom() {
      this.loctiontop += 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    //放大图片按钮
    big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },
    //点击任务的每一项的事件
    addtask(item, index) {
      //保存点击的这一项数据到变量中
      this.activeItem = item;
      if (item == "回待命点") {
        this.newIndex = index;
        // 把回待命点组件显示
        this.Standby = true;
        // 把充电组件隐藏
        this.recharge = false;
        // 把点到点组件状态改为隐藏
        this.spotshow = false;
        //把点到列组件隐藏
        this.listShow = false;
        // 把列到列组件隐藏
        this.Thirdly = false;
        //把列到点组件隐藏
        this.Fourth = false;
      } else if (item == "充电") {
        console.log(22);
        // 把充电组件显示
        this.recharge = true;
        // 把点到点组件状态改为隐藏
        this.spotshow = false;
        // 把回待命点隐藏
        this.Standby = false;
        //把点到列组件隐藏
        this.listShow = false;
        // 把列到列组件隐藏
        this.Thirdly = false;
        //把列到点组件隐藏
        this.Fourth = false;
      } else if (item == "点到点任务") {
        // 把点到点组件状态改为显示
        this.spotshow = true;
        // 把回待命点隐藏
        this.Standby = false;
        // 把充电组件隐藏
        this.recharge = false;
        //把点到列组件隐藏
        this.listShow = false;
        // 把列到列组件隐藏
        this.Thirdly = false;
        //把列到点组件隐藏
        this.Fourth = false;
        // 把点击的这一项名字赋值给name
      } else if (item == "点到列任务") {
        //把点到列变量改为true显示
        this.listShow = true;
        // 把回待命点隐藏
        this.Standby = false;
        // 把充电组件隐藏
        this.recharge = false;
        //把点到点组件隐藏
        this.spotshow = false;
        // 把列到列组件隐藏
        this.Thirdly = false;
        //把列到点组件隐藏
        this.Fourth = false;
      } else if (item == "列到点任务") {
        //把列到点组件显示
        this.Fourth = true;
        // 把回待命点隐藏
        this.Standby = false;
        // 把充电组件隐藏
        this.recharge = false;
        // 把列到列组件隐藏
        this.Thirdly = false;
        // 把点到点组件隐藏
        this.spotshow = false;
        // 把点到列组件隐藏
        this.listShow = false;
      } else if (item == "列到列任务") {
        // 把列到列组件显示
        this.Thirdly = true;
        // 把回待命点隐藏
        this.Standby = false;
        // 把充电组件隐藏
        this.recharge = false;
        // 把点到点组件隐藏
        this.spotshow = false;
        // 把点到列组件隐藏
        this.listShow = false;
        //把列到点组件隐藏
        this.Fourth = false;
      }
      this.newIndex = index;
      this.newItem = item;
      console.log(item);
    },

    // -------------------------------------------------------------------------------获取地图信息的方法
    gain() {
     let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器上的端口号
      //      let ws = new WebSocket("ws://192.168.20.101:10009");
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        //当服务器有消息，就会自动调用这个函数
        //e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.inif.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
          this.inif.width = res.info.width; //保存宽度
          this.inif.height = res.info.height; //保存高度
          this.inif.newx = res.info.origin.position.x;
          this.inif.newy = res.info.origin.position.y;
        } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.inif.x = res.fused_x; //保存获取到的x轴坐标
          this.inif.y = res.fused_y; //保存获取到的y轴坐标
          this.inif.fused_angle = res.fused_angle;
          // console.log(this.inif.x, this.inif.y, "坐标");
        } else if (res.uri == "/sirius/topics/task_status_new_bee") {
          this.taskList = res
        }
      };
    },

    //------------------------------------------------------------------------获取库位点接口请求
    async getrecord() {
      let res = await gainApi();
      let newres = yaml.load(res.data);
      console.log(newres, "测试数据");
      if (res.data.msg !== "successed" && newres !== undefined) {
        //转换成对象键值对形式
        // 定义一个数组用来解构
        let one = [];
        //将转换好的对象追加到robot数组中
        one.push(newres);
        // 把最外层的数组给解构出来
        let flattened = [].concat.apply([], one);
        //赋值给robot数组
        this.robot = flattened;

        this.location = newres
      }
    },
    //-----------------------------------------获取列列表数据
    async getline() {
      let res = await parseApi();
      //把数据格式进行转换
      let newres = yaml.load(res.data);
      //使用map进行映射修改id的键为text
      this.lineList = newres
    },
    //-------------------------------------------------------------------------获取路线编辑的方法请求
    async geteditors() {
      let res = await geteditorsApi(); //发送请求获取数据
      if (res.data.msg != "successed") {
        this.complete = yaml.load(res.data); //定义一个新的变量
      }
    },
  },
};
</script>

<style lang="less" scoped>
.executes {
  position: fixed;
  top: 70px;
  margin-top: 20px;
  width: 100%;
  height: 100vh;
  background-color: #12151a;
  .box {
    display: flex;
    margin: 0px auto;
    margin-left: 20px;
    height: 850px;
    .woimg {
      flex: 1;
      // border: 2px solid black;
      width: 700px !important;
    height: 500px;
      overflow: hidden;
      display: flex;
      position:relative;
      .right {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 40%;
        right: 0;
        color: #1ac1c1;
        z-index: 1000;
        border: none;
      }
      .left {
        position: absolute;
        top: 40%;
        left: 0px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
        border: none;
        z-index: 1000;
      }
      .top {
        position: absolute;
        top: 0;
        right: 290px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;

        z-index: 1000;
        border: none;
      }
      .bottom {
        position: absolute;
        bottom: 0;
        right: 290px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
        z-index: 1000;
        border: none;
      }
      ::v-deep .van-image__img {
        width: auto !important;
      }
      #myone {
        position: relative;
      }

      #mianspan {
        line-height: 38px;
        text-align: center;
        border-radius: 50%;
        background-color: #00d1d1;
        position: absolute;
      }
      #myspan {
  width: 35px;
  height: 35px;
  border: 2px solid #00d1d1;
  border-radius: 20px;
  position: absolute;
  top: 200px;
  left: 100px;
  color: rgb(10, 0, 1);
  background-color: #ddd9;
  font-weight: 900;
}

      // 库位点样式
      #span {
        font-size: 14px;
        line-height: 8px;
        text-align: center;
        width: 8px;
        height: 8px;
        position: absolute;
        background-color: #feed9d;
        border: 2px solid #aca485;
        &.active {
          background-color: red;
        }
      }
      #bycar {
        width: 20px;
        height: 30px;
        position: absolute;
      }
    }
    .mycontent {
      background-color: #12151a;
      height: 100%;
      // flex: 1;
      width: 320px;
      .van-button {
        margin: 0 5px 10px;
        background-color: #1a1c25;
        width: 150px;
        height: 35px;
        color: #fff;
        font-size: 18px;
        border: none;
        border-radius: 10px;
        &.active {
          background-color: #3bbabd;
          color: #fff;
          font-weight: 700;
        }
      }
      .pulldown {
        margin-top: 10px;
        font-size: 40px;
        ::v-deep .van-dropdown-menu__title {
          position: relative;
          box-sizing: border-box;
          max-width: 100%;
          padding: 0 163px;
        }
        // ::v-deep .van-dropdown-menu__item {
        //   display: flex;
        //   flex: 1;
        //   align-items: center;
        //   justify-content: center;
        //   width: 200px !important;
        //   cursor: pointer;
        //   background-color: skyblue !important;
        // }
        // .van-dropdown-menu {
        //   position: relative;
        //   padding: 0 10px;
        //   margin-bottom: 20px;
        //   width: 200px !important;
        //   .van-icon {
        //     position: absolute;
        //     top: 5px;
        //     left: 20px;
        //     span {
        //       font-size: 16px;
        //       color: black;
        //       margin-left: 10px;
        //     }
        //   }
        // }
      }

      .button {
        margin: 0 80px;
      }
      .recharge {
        margin-top: 30px;
        .van-dropdown-menu {
          position: relative;
          padding: 0 10px;
          margin-bottom: 20px;
          .van-icon {
            position: absolute;
            top: 5px;
            left: 20px;
            span {
              font-size: 16px;
              color: black;
              margin-left: 10px;
            }
          }
        }
        ::v-deep .van-dropdown-menu__title {
          position: relative;
          box-sizing: border-box;
          max-width: 100%;
          padding: 0 163px;
        }
      }
    }
  }
}

.condition {
  border: 3px solid #282c3b;
  width: 300px;
  height: 400px;
  margin: 0 10px;
  background-color: yellow;
  .head {
    font-size: 20px;
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid red;
  }
}
.tasks{
  font-size: 22px;
  color: #fff;
  padding: 10px 20px;
}.myspanID{position: absolute;
  color: rgb(10, 0, 1);
  font-weight: 900;
}
.mybig {
  position: fixed;
  bottom: 19px;
    right: 188px;
  .van-button {
    margin-left: 20px;
  }
}
.zhouimg{
  position: absolute;
  pointer-events: none;
  bottom: 0px;
  left: 0px;
  width: 120px;

}
</style>
